<template>
  <div
    class="lectureList"
    v-infinite-scroll="lectureLoadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
  >
    <!-- 加载item -->
    <div
      class="lectureItem"
      v-for="item in lectureItemList"
      :key="item.message"
      @click="goDetailsView(item.id)"
    >
      <div
        class="item_img"
        :style="{ backgroundImage: 'url(' + item.img + ')' }"
      ></div>
      <p class="item_title">
        2020年第12期日语进阶线上直播教学{{ item.message }}
      </p>
      <p class="item_text">
        特邀日本老师我是人名给大家进行简单的语法分析并结合基本语法的学习，全面提高对语法的感知力和认知力。
      </p>
      <div class="item_label">
        <span class="item_state">时间：{{ item.time }}</span>
        <span class="item_price">查看详情 》</span>
      </div>
      <div class="item_line"></div>
    </div>
    <div style="height: 1.5625rem;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      lectureItemList: [],
      nowPage: 1,
      limit: 5
    };
  },
  created() {},
  methods: {
    // 滚动到底部执行这个方法
    lectureLoadMore() {
      let me = this;
      this.loading = true;
      this.$axios
        .post("/api/apply/bili_train", {
          page: this.nowPage,
          limit: this.limit
        })
        .then(function(response) {
          //如果请求出现错误
          if (response.code != 200) {
            console.log(response.msg);
            me.loading = false;
            return;
          }

          me.nowPage = me.nowPage + 1;
          let newList = response.data;
          me.lectureItemList.push.apply(me.lectureItemList, newList);

          me.loading = false;
        })
        .catch(function(error) {
          console.log(error);
          me.loading = false;
        });
    },
    goDetailsView(id) {
      localStorage.sign_id = id;
      this.$router.push({
        name: "SignUpDetails",
        params: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0rem;
}
.lectureList {
  width: 21.5625rem;
  .lectureItem {
    margin-bottom: 1.5625rem;
    .item_img {
      width: 21.5625rem;
      height: 12.5rem;
      background-color: #234567;
      border-radius: 0.625rem;
      background-image: url(../../assets/item_img.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    .item_title {
      margin-top: 0.625rem;
      color: #333333;
      font-size: 0.9375rem;
    }

    .item_text {
      margin-top: 0.8125rem;
      color: #666666;
      font-size: 0.8125rem;
    }

    .item_label {
      width: 21.5625rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 1.0625rem;
      .item_state {
        color: #999999;
        font-size: 0.75rem;
      }
      .item_price {
        color: #ff0000;
        font-size: 0.8125rem;
      }
    }

    .item_line {
      width: 21.5625rem;
      height: 0.0625rem;
      margin-top: 1.5625rem;
      background-color: #f2f2f2;
    }
  }
}
</style>
